import { dialog_operate } from '../../../../global_comps/Classes/dialog_operate/Classes/cla_dialog_operate';
import { normalizeContainer } from '../../../../global_comps/Func/normalizeContainer';
import { pack_all_child_node_from_to } from '../../../../global_comps/Func/pack_all_child_node_from_to';
import {
  add_new_type_border,
  add_new_type_container,
  add_new_type_inp,
  attri_add_new_type_selected_type,
  attri_add_new_type_selected_type_val,
  spacename_add_new_type,
} from '../DataDefine/sourceData';
import type { add_new_type_props } from './cla_add_new_type_props';
import {
  ref_cur_active_type_info,
  refresh_cur_active_type_info,
} from '../Func/ref_cur_active_type_info';
import { set_keyVal_node_info } from '@/components/global_comps/uni_comps/keyVal_node/keyVal_node';
import { toRaw } from 'vue';

const add_new_type_staticNodeTag = 'add_new_type_staticNode';

export class add_new_type_staticNode extends dialog_operate {
  get [Symbol.toStringTag]() {
    return add_new_type_staticNodeTag;
  }

  constructor(props?: add_new_type_props) {
    super(spacename_add_new_type);

    this.whiteSpace_click_func_promise_before = () =>
      new Promise<void>((resolve) => {
        let cur_len = refresh_cur_active_type_info();

        this.#cur_selected_type(cur_len);

        this.set_keyVal_node(toRaw(ref_cur_active_type_info.value));
        resolve();
      });

    this.whiteSpace_click_func_promise_after = () =>
      new Promise<void>((resolve) => {
        pack_all_child_node_from_to(
          this.dom_dialog,
          this.dom_new_type_container
        );

        resolve();
      });
  }
  /**
   * keyVal dom
   */
  dom_keyVal_inp: HTMLInputElement = normalizeContainer(
    add_new_type_inp
  )! as any;

  /**
   * 记录 当前值
   */
  set_keyVal_node(info: any) {
    set_keyVal_node_info(this.dom_keyVal_inp, info);
  }

  /**
   * 主体元素
   */
  dom_border = normalizeContainer(add_new_type_border)!;

  /**
   * 类型 簇 的 容器
   */
  dom_new_type_container = normalizeContainer(add_new_type_container)!;

  /**
   * 判定 当前 是否有 至少 一个 类型
   *
   * 被选中
   */
  #cur_selected_type(len: number) {
    if (len === 0) {
      this.#view_icon();
    } else {
      this.#view_cur_uni_type();
    }
  }

  /**
   * 显示 添加 icon
   */
  #view_icon() {
    this.dom_border.removeAttribute(attri_add_new_type_selected_type);
  }

  /**
   * 显示 所有 选中的 类型
   */
  #view_cur_uni_type() {
    this.dom_border.setAttribute(
      attri_add_new_type_selected_type,
      attri_add_new_type_selected_type_val
    );
  }
}
